<template>
	<view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" :mask-click="false" @change="popChange" background-color="rgba(0,0,0,0)"
			:safe-area="false">
			<view class="popup-content">
				<view class="shop flex align-center padding">
					<view class="shopImage margin-right-sm">
						<image src="/static/icon/yinpin.png" style="height: 200rpx;width: 200rpx;border-radius: 28rpx;">
						</image>
					</view>
					<view class="flex-column justify-between flex-1">
						<view class="font-16 text-333 margin-bottom-sm flex align-center justify-between">
							<view class="font-weight-blod">安神糖浆</view>
							<view class="font-18 text-666" @click="closeUnipop()"><text class="cuIcon-close"></text>
							</view>
						</view>
						<view class="font-12 text-666 margin-bottom-sm">120ml 贵州益佰制药股份有限公司</view>
						<view class="font-12 text-666 flex align-center justify-between margin-bottom-sm">
							<view>可售库存60瓶</view>
							<view>零售￥10</view>
						</view>
						<view class="font-12 text-666 margin-bottom-sm">中/大包装：1/60瓶 可拆零</view>
						<view class="font-10 text-999">山西药九九/山西药九九</view>
					</view>
				</view>

				<view class="padding-lr padding-tb-sm flex justify-between align-center font-14">
					<view>客户</view>
					<view>太原小店区梁栋诊所</view>
				</view>

				<view class="padding-lr padding-tb-sm flex justify-between align-center font-14">
					<view>价格</view>
					<view class="flex justify-center align-center">
						<text class="text-red font-18">￥18.54</text>
						<view style="position: relative;">
							<text class="cuIcon-question font-18 text-999"
								@click="showQuesContion=!showQuesContion"></text>
							<view v-if="showQuesContion"
								style="position: absolute;top: 30px;right: -7rpx;z-index: 9; width: 430rpx;background-color: #F2F2F2;"
								class="padding-sm font-14 text-666">
								您暂时无改价权限，请联系企业负责人或电商管理员配置权限。

								<view class="triangle"></view>

							</view>

						</view>


					</view>
				</view>

				<view class="padding-lr padding-tb-sm flex justify-between align-center font-14">
					<view>数量</view>
					<view><u-number-box v-model="value" @change="valChange"></u-number-box></view>
				</view>

				<view class="padding-lr padding-tb-sm flex justify-between align-center font-14">
					<view>需求到货日期</view>
					<view class="flex-1" style="height: 100%;">
						<picker style="height: 100%;text-align: right;" mode="date" :value="date" start="2015-09-01"
							end="2058-09-01" @change="DateChange">
							<view class="picker">
								{{date}}
							</view>
						</picker>
					</view>
					<view>
						<text class="cuIcon-right text-999"></text>
					</view>
				</view>
				<view class="margin-top-lg padding width-100 padding-bottom-xl">
					<view class="cu-btn bg-main-yellow lg round width-100" v-if="showPopType=='addShop'">确定</view>
					<view class="cu-btn bg-main-green lg round width-100" v-if="showPopType=='addQueShop'">加入缺货篮</view>
				</view>
			</view>
			<view style="height: 50px;"></view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "alert-add-shop",
		props: {
			dataObj: {
				type: Object,
				default: () => {
					return {}
				},
			},
		},
		data() {
			return {
				showQuesContion: false,
				showPopType: "addShop",
				date: "",
				value: 0,
			};
		},
		methods: {
			valChange(e) {
				console.log("valChange", e)
			},
			DateChange(e) {
				console.log("DateChange", e)
				this.date = e.detail.value
			},
			closeUnipop() {
				this.$refs.popup.close()
			},
			showPopAddShop(type) {
				this.showPopType = type
				this.$refs.popup.open("bottom")
			},
			popChange(e) {
				console.log("popChange", e)
			},
		},
	}
</script>

<style scoped lang="scss">
	/* 小三角样式 */
	.triangle {
		position: absolute;
		top: -18rpx;
		right: -6rpx;
		transform: translateX(-50%);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-bottom: 10px solid #f5f5f5;
		/* 与弹窗背景色一致 */
	}
	.popup-content {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		background: #fff;
	}

</style>